<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${userName}+' '+${monthValue}+'月打卡'"></title>
    <script type="text/javascript" th:src="@{/js/jquery-3.6.0.min.js}"></script>

    <style>
        body {
            width: 90%;
        }

        table {
            border-collapse: collapse;
            width: 85%;
            margin: auto;
        }

        .table-header {
            font-size: x-large;
        }

        th, td {
            border: 1px solid #eceff6;
            padding: 8px;
            text-align: center;
            height: 55px;
        }

        th {
            background-color: #f2f2f2;
        }

        td {
            width: 200px;
            height: 60px;
        }

        .riliUnm {
            text-align: left;
            font-size: 20px;
        }

        .riliUnmTodya {
            text-align: left;
            font-size: 20px;
            color: #000cff;
        }
    </style>
</head>
<body>
<h2 style="text-align: center ;display: inline-block;    float: left;    margin-left: 45%;">
    <span th:text="${userName}"> </span><span th:text="${yearValue}"></span>-<span th:text="${monthValue}"></span>
</h2>

<div>
    <form th:action="@{/pc/getClockList}" method="get" id="clockList">
        <div style=" margin-left: 20px; float: right; margin-right: 110px;margin-top: 30px;font-size: 20px">
            <input id="toPreMonth" type="button" value="上个月">
            <input id="toToday" type="button" value="今日">
            <input id="toNextMonth" type="button" value="下个月">
            <input type="text" id="userName" name="userName" th:value="${userName}" style="display: none;">
            <label>
                <select id="year" name="year" onchange="submitMonth()" class="month-selector">
                    <option value=2024 th:selected="${yearValue==2024}">2024 年</option>
                    <option value=2025 th:selected="${yearValue==2025}">2025 年</option>
                    <option value=2026 th:selected="${yearValue==2026}">2026 年</option>
                    <option value=2027 th:selected="${yearValue==2027}">2027 年</option>
                    <option value=2028 th:selected="${yearValue==2028}">2028 年</option>
                    <option value=2029 th:selected="${yearValue==2029}">2029 年</option>
                    <option value=2030 th:selected="${yearValue==2030}">2030 年</option>
                </select>
            </label>
            <label>
                <select id="month" name="month" onchange="submitMonth()" class="month-selector">
                    <option value=1 th:selected="${monthValue==1}">1 月</option>
                    <option value=2 th:selected="${monthValue==2}">2 月</option>
                    <option value=3 th:selected="${monthValue==3}">3 月</option>
                    <option value=4 th:selected="${monthValue==4}">4 月</option>
                    <option value=5 th:selected="${monthValue==5}">5 月</option>
                    <option value=6 th:selected="${monthValue==6}">6 月</option>
                    <option value=7 th:selected="${monthValue==7}">7 月</option>
                    <option value=8 th:selected="${monthValue==8}">8 月</option>
                    <option value=9 th:selected="${monthValue==9}">9 月</option>
                    <option value=10 th:selected="${monthValue==10}">10 月</option>
                    <option value=11 th:selected="${monthValue==11}">11 月</option>
                    <option value=12 th:selected="${monthValue==12}">12 月</option>
                </select>
            </label>
        </div>
    </form>
</div>
<div>
    <table id="calendarinfo" style="margin-bottom: 20px">
        <tbody>
        <tr>
            <th style="height: 35px;">月份</th>
            <th style="height: 35px;">本周加班</th>
            <th style="height: 35px">本月加班</th>
            <th style="height: 35px;">出勤</th>
            <th style="height: 35px;">加班</th>
            <th style="height: 35px;">月均剩余</th>
        </tr>
        <tr>
            <td style="height: 33px;"><span th:text="${monthValue}"></span></td>
            <td style="height: 33px;"><span th:text="${data.weekTimeData}"></span></td>
            <td style="height: 33px;"><span th:text="${data.monthTimeDate}"></span></td>
            <td style="height: 33px;"><span th:text="${data.attendDays}"></span>天</td>
            <td style="height: 33px;"><span th:text="${data.latterDays}"></span>天</td>
            <td style="height: 33px;"><span th:text="${data.restAverageTime}"></span></td>
        </tr>
        </tbody>
    </table>
    </table>
</div>

<table id="calendar"></table>

<h2 style="text-align: center;">今日打卡历史</h2>
<table id="attendHistoryList"></table>
<script th:inline="javascript">
    // 获取提交按钮

    const year = [[${yearValue}]];
    const userName = [[${userName}]];
    const month = [[${monthValue}]];

    function createCalendar() {
        const data = [[${data.attendList.records}]]
        const year = [[${yearValue}]];
        const month = [[${monthValue}]];
        const firstDay = new Date(year, month - 1, 1).getDay();
        const daysInMonth = new Date(year, month, 0).getDate();
        let calendarHtml = '<tr class="table-header"><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th><th>日</th></tr>';
        let dayCounter = 1;
        const trCount = Math.ceil((daysInMonth + firstDay - 1) / 7);
        for (let i = 0; i < trCount; i++) {
            calendarHtml += '<tr>';
            for (let j = 0; j < 7; j++) {
                if (i === 0 && j < firstDay - 1 || dayCounter > daysInMonth) {
                    calendarHtml += '<td></td>';
                } else {
                    var doc = ``;
                    //判断是否是今天
                    if ((new Date().getMonth() + 1) == month && dayCounter == new Date().getDate()) {
                        doc = `<td><div class="riliUnmTodya">${dayCounter}</div>`;
                    } else {
                        doc = `<td><div class="riliUnm">${dayCounter}</div>`;
                    }

                    if (data[dayCounter] !== undefined) {
                        // 有数据
                        if (data[dayCounter].clockUpTime != null | data[dayCounter].clockDownTime != null) {
                            doc += `<span class="riliData">` + data[dayCounter].clockUpTime + ` - ` + data[dayCounter].clockDownTime + `</span></td>`;
                        } else {
                            // 无数据
                            doc += `</td>`;
                        }
                        calendarHtml = calendarHtml + doc;
                    } else {
                        calendarHtml = calendarHtml + doc + `</td>`;
                    }
                    dayCounter++;
                }
            }
            calendarHtml += '</tr>';
        }
        document.getElementById('calendar').innerHTML = calendarHtml;
    }

    createCalendar();

    $("#toPreMonth").click(function () {
        var yearTmp = year;
        var monthTmp = month - 1;
        if (monthTmp == 0) {
            monthTmp = 12;
            yearTmp = yearTmp - 1;
        }
        if (yearTmp == 2023) {
            alert("不存在2023年数据");
            return;
        }
        $('#month').val(monthTmp);
        $('#year').val(yearTmp);
        document.getElementById('clockList').submit();
    });
    $("#toToday").click(function () {
        $('#month').val(new Date().getMonth());
        $('#year').val(new Date().getFullYear());
        document.getElementById('clockList').submit();
    });
    $("#toNextMonth").click(function () {
        var yearTmp = year;
        var monthTmp = month + 1;
        if (monthTmp == 13) {
            monthTmp = 1;
            yearTmp = yearTmp + 1;
        }
        if (yearTmp == 2031) {
            alert("不存在2031年数据");
            return;
        }
        $('#month').val(monthTmp);
        $('#year').val(yearTmp);
        document.getElementById('clockList').submit();
    });

    function submitMonth() {
        document.getElementById('clockList').submit();
    }

    var calendarTbody = document.getElementById("calendar").children[0];
    for (let i = 1; i < calendarTbody.children.length; i++) {
        var childrens = calendarTbody.children[i].children;
        for (let j = 0; j < childrens.length; j++) {
            var td = childrens[j];
            if (td.children.length == 0) {
            } else {
                if (td.children[0].textContent.length > 0) {
                    const day = td.children[0].textContent;
                    $(td).click(function () {
                        getAttendHistory(userName, month, day)
                    });
                } else {
                    console.log("无数据")
                }
            }
            // // 为提交按钮添加点击事件
            // childrens[j].addEventListener('click', function (event) {
            //     event.preventDefault();  // 阻止表单默认提交行为
            //     childrens[j].ch
            //
            // });
        }
    }


    function getAttendHistory(userName, month, day) {
        $.ajax({
            url: "/attendHistory/list?userName=" + userName + "&year=2024&month=" + month + "&day=" + day,// 请求的地址
            data: {},// 请求参数--没有
            type: "get",// 请求方式
            dataType: "json",// 服务器返回的数据类型即为json对象
            success: function (resp) {
                var attendHistoryList = resp;
                showattendHistoryList(attendHistoryList)
            },
            timeout: 50000,// 超时时间，超时后会调用error后的函数
            error: function (xhr, textStatus, errorThrown) {
                // 404 请求地址无效
                if (XMLHttpRequest.status == '404') {
                    alert("404:请求地址" + url + "无效.");
                    return;
                }

                var msg = "xhr.readyState=" + xhr.readyState + "\n";
                msg += "xhr.status=" + xhr.status + "\n";
                msg += "errorThrown=" + errorThrown + "\n";
                alert(msg);
            }
        });
    }

    getAttendHistory(userName, month, new Date().getDate())

    function showattendHistoryList(attendHistoryList) {
        var table = document.getElementById("attendHistoryList");
        // remove remained rows
        var trs = table.childNodes;
        for (var i = trs.length - 1; i >= 0; i--) {
            table.removeChild(trs[i]);
        }
        // add new rows
        var n = attendHistoryList.length;
        for (var i = 0; i < n; i++) {
            var attendHistory = attendHistoryList[i];

            var td1 = document.createElement("td");
            td1.appendChild(document.createTextNode(attendHistory.clockTime));
            // .substr(11)
            var td2 = document.createElement("td");
            td2.appendChild(document.createTextNode(attendHistory.osType));

            var td3 = document.createElement("td");
            td3.appendChild(document.createTextNode(attendHistory.remark));

            var tr = document.createElement("tr");
            tr.appendChild(td1);
            tr.appendChild(td2);
            tr.appendChild(td3);

            table.appendChild(tr);
        }
    }

</script>
</body>
</html>
